<template>
  <div class="article-container">
    <!-- 文章头部 -->
    <div class="article-header">
      <h1 class="article-title">{{ articleDetail.opusTitle }}</h1>
      <div class="meta-info">
        <el-avatar :src="articleDetail.author.avatar" class="author-avatar">
          <img src="https://cube.elemecdn.com/3/78/3df5isd64fd409429cc652b62559c02b.png">
        </el-avatar>
        <span class="author-name">{{ articleDetail.author.nickname }}</span>
        <span class="separator">·</span>
        <span>分类：{{ articleDetail.topic.topicName }}</span>
        <span class="separator">·</span>
        <span>创建时间：{{ articleDetail.createTime }}</span>
      </div>
    </div>

    <!-- 文章内容 -->
    <div class="article-content">
      <div class="content-body" v-html="articleDetail.opusHtml" />
    </div>

    <!-- 点赞和操作区 -->
    <div class="actions-bar">
      <el-button type="primary" @click="toggleLike">
        <i class="el-icon-star-on" :class="{ 'liked': liked }" />
        点赞 {{ articleDetail.likeCount }}
      </el-button>
      <el-button type="text" @click="toggleComment">
        <i class="el-icon-chat-line-round" />
        评论 {{ articleDetail.comments.length }}
      </el-button>
    </div>

    <!-- 评论区 -->
    <div v-if="showComment" class="comment-section">
      <el-input
        v-model="opusCommentForm.words"
        type="textarea"
        :rows="3"
        placeholder="写下你的评论..."
        class="comment-input"
      />

      <div class="comment-form-footer">
        <el-avatar :src="currentUser.avatar" class="current-user-avatar">
          <img src="https://cube.elemecdn.com/3/78/3df5isd64fd409429cc652b62559c02b.png">
        </el-avatar>
        <el-button
          type="primary"
          :disabled="!opusCommentForm.words"
          class="submit-btn"
          @click="addComment"
        >
          发布评论
        </el-button>
      </div>

      <div v-if="articleDetail.comments.length">
        <h3 class="section-title">评论列表</h3>
        <el-timeline>
          <el-timeline-item
            v-for="(comment,index) in articleDetail.comments"
            :key="comment.commentId"
            :timestamp="comment.createTime"
          >
            <div class="comment-item">
              <el-avatar :src="articleDetail.Users[index].avatar" class="comment-avatar">
                <img src="https://cube.elemecdn.com/3/78/3df5isd64fd409429cc652b62559c02b.png">
              </el-avatar>
              <div class="comment-content">
                <div class="author-info">
                  <span class="nickname">{{ articleDetail.Users[index].nickname }}</span>
                  <span class="time">{{ comment.createTime }}</span>
                </div>
                <p>{{ comment.words }}</p>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div v-else class="no-comments">
        还没有人发表评论，快来抢沙发吧！
      </div>
    </div>
  </div>
</template>

<script>
import { getOpusById } from '@/api/opus'
import { addLike, deleteLike } from '@/api/oupusLike'
import { createOrUpdateComment } from '@/api/opusComment'

export default {
  name: 'OpusPreview',
  data() {
    return {
      articleDetail: {
        opusId: null,
        opusTitle: '',
        opusHtml: '',
        author: { // 需后端返回作者详细信息
          id: null,
          nickname: '',
          avatar: ''
        },
        topic: { // 需后端返回主题名称
          topicId: null,
          topicName: ''
        },
        comments: [], // 需包含 authorAvatar 和 authorNickname
        Users: [],
        likeCount: 0,
        createTime: null
      },
      opusLikeForm: {
        likeId: null,
        opusId: null,
        likeUserId: null,
        createTime: null
      },
      opusCommentForm: {
        commentId: null,
        opusId: null,
        commentUserId: null,
        words: '',
        createTime: null
      },
      newComment: '',
      showComment: false,
      liked: false,
      likedId: null,
      currentUser: { // 假设通过 vuex 或本地存储获取当前用户信息
        avatar: 'https://example.com/avatar.jpg',
        nickname: '当前用户'
      }
    }
  },
  created() {
    this.currentUser.avatar = this.$store.state.user.avatar
    this.currentUser.nickname = this.$store.state.user.nickname
    this.fetchArticleDetail()
  },
  methods: {
    async fetchArticleDetail() {
      const articleId = this.$route.params.id
      const response = await getOpusById({ opusId: articleId })
      const {
        opusId,
        opusTitle,
        opusHtml,
        createTime
      } = response.opus
      const author = response.userinfo // 需包含 avatar 和 nickname
      const topic = response.topic // 需包含 topicName
      const comments = response.opusComments // 每个评论需包含 authorAvatar、authorNickname
      const likeCount = response.opusLikes.length // 点赞数量
      const Users = response.Users
      this.liked = response.liked
      this.likedId = response.likedId
      this.articleDetail = {
        opusId,
        opusTitle,
        opusHtml,
        author,
        topic,
        comments,
        likeCount,
        createTime,
        Users
      }
      console.log(this.articleDetail)
    },
    async toggleLike() {
      if (this.liked) {
        await deleteLike({ likeId: this.likedId })
      } else {
        this.opusLikeForm.opusId = this.articleDetail.opusId
        await addLike(this.opusLikeForm)
      }
      await this.fetchArticleDetail()
    },
    toggleComment() {
      this.showComment = !this.showComment
    },
    async addComment() {
      if (!this.opusCommentForm) return
      this.opusCommentForm.opusId = this.articleDetail.opusId
      await createOrUpdateComment(this.opusCommentForm)
      this.opusCommentForm.words = ''
      await this.fetchArticleDetail()
    },
    formatDate(time) {
      return this.$moment(time).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style lang="scss" scoped>
.article-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
}

.article-header {
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 30px;
}

.article-title {
  font-size: 28px;
  margin-bottom: 15px;
}

.meta-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .author-avatar {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }

  .author-name {
    margin-right: 15px;
    font-weight: bold;
    color: #303133;
  }

  .separator {
    margin: 0 10px;
    color: #c0ccda;
  }
}

.article-content {
  margin-top: 30px;

  .content-body {
    min-height: 300px;
    padding: 20px;
    background: #f9fafc;
    border-radius: 8px;
    overflow: auto;

    img {
      max-width: 100%;
    }
  }
}

.actions-bar {
  margin: 30px 0;
  text-align: right;

  button {
    margin-right: 15px;

    &:last-child {
      margin-right: 0;
    }
  }

  .el-button.liked {
    color: #f56c6c;
  }
}

.comment-section {
  .comment-input {
    margin-bottom: 15px;
    width: 100%;
  }

  .comment-form-footer {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .current-user-avatar {
      width: 40px;
      height: 40px;
      margin-right: 15px;
    }

    .submit-btn {
      flex: 1;
      margin-left: 15px;
    }
  }

  .no-comments {
    padding: 20px;
    text-align: center;
    color: #909399;
  }

  .el-timeline {
    .comment-item {
      display: flex;
      align-items: flex-start;

      .comment-avatar {
        width: 40px;
        height: 40px;
        margin-right: 15px;
      }

      .comment-content {
        flex: 1;

        .author-info {
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;

          .nickname {
            font-weight: bold;
            color: #303133;
          }

          .time {
            color: #909399;
            font-size: 12px;
          }
        }
      }
    }
  }
}

.section-title {
  margin-top: 30px;
  font-size: 18px;
  color: #409EFF;
}
</style>
